<template>
  <section class="my-parttime">
    <div class="item">
      <div class="top">
        <div class="flex flex-between flex-middle">
          <div class="title">{{info.job_name}}</div>
          <div class="status">{{typeOtions[info.job_apply_status]}}</div>
        </div>
        <div class="desc mt15">
          {{info.area_name}} | {{info.settlement==1?'小时':''}}{{info.settlement==2?'日结':''}}{{info.settlement==3?'周结':''}}{{info.settlement==4?'月结':''}} | {{info.create_time}} | {{info.settlement=='1'?info.salary+'元/小时':info.settlement=='2'?info.salary+'元/日':info.settlement=='3'?info.salary+'元/周':info.settlement=='3'?info.salary+'元/月':''}}
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="title">兼职报名跟踪</div>
      <van-steps
        :steps="steps"
        :active="activeOptions[info.job_apply_status]"
        active-color="#3BB8FD"
      />
    </div>
  </section>
</template>
<script>
import {cutTime} from '@/utils/filters.js';
export default {
  data() {

    return {
      active: 1,
      info: {},
      typeOtions: {
        1: '已报名',
        2: '已查看',
        3: '已取消',
        4: '已录用',
        5: '已到岗',
        6: '已结算',
        7: '待录用'
      },
      activeOptions: {
        1: 0,
        2: 1,
        3: 0,
        4: 3,
        5: 3,
        6: 3,
        7: 2
      },
      steps: [
        {
          text: '已报名',
        },
        {
          text: '已查看',
        },
        {
          text: '待录用',
        },
        {
          text: '已录用',
        }
      ]
    };
  },
  methods: {
    routerTo(url) {
      wx.navigateTo({ url });
    },
    getDetail(id) {
      this.$api.getMemberJobsInfo({id}).then(res => {
        res.data.create_time = cutTime(res.data.create_time);
        this.info = res.data;
      })
    }
  },
  onShow() {
    const params = this.$getQuery();
    this.getDetail(params.id);
  }
};
</script>
<style lang="scss" scoped>
.my-parttime {
  .item {
    background: white;
    padding: 15px;
    border-bottom: 10px solid #f7f7f7;
    .title {
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
    }
    .status {
      font-size: 14px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(59, 184, 253, 1);
    }
    .desc {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
    }
    button {
      width: 60px;
      height: 21px;
      background: rgba(59, 184, 253, 1);
      border-radius: 2px;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      line-height: 21px;
      margin: 0;
    }
    .giveup {
      border: 1px solid rgba(59, 184, 253, 1);
      background: white;
      color: rgba(59, 184, 253, 1);
    }
    .link,
    .del {
      color: rgba(255, 255, 255, 1);
    }
  }
  .detail {
    padding: 15px;
    .title {
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      margin-bottom: 15px;
    }
  }
}
</style>